<template>
  <div class="app-container SalaryDetails">
    <!-- 查询 -->
    <comForm :list="comFormList" @EventOnsubmit="onSubmit"></comForm>
    <!-- 按钮组 -->
    <div class="btn-box">
      <comMb8Button
        :config="comMb8ButtonConfig"
        @handle="clickBtnGroup_btnBox"
      ></comMb8Button>
    </div>
    <!-- 表格 -->
    <comTable
      :list="comTableList"
      :modes="comTableMode"
      :pagination="comTablePagination"
      :config="comTableConfig"
      @handleSizeChange="handleSizeChange"
      @handleCurrentChange="handleCurrentChange"
    >
    </comTable>
  </div>
</template>

<script>
import { getWageDetails_ByEmployeeIdStr } from "@/wss/api/financial/Accounting/wageInfo";
import { updateWageInfoStatus_ById } from "@/wss/api/financial/Accounting/wage";
import comForm from "@/wss/components/comForm.vue";
import comTable from "@/wss/components/comTable.vue";
import comMb8Button from "@/wss/components/comMb8Button.vue";
export default {
  name: "SalaryDetails",
  components: {
    comForm,
    comTable,
    comMb8Button,
  },
  data() {
    return {
      //------- query -------//
      eInfo: {
        id: "",
        employeeId: "",
        eName: "",
        status: "",
      },
      //------- Form -------//
      comFormList: {
        modes: [
          {
            placeholder: "请输入员订单号",
            formType: "input",
            label: "订单号",
            mode: "orderNo",
            value: "",
          },
          {
            placeholder: "请选择角色",
            formType: "select",
            label: "摘要",
            value: "",
            mode: "info",
            select: [
              {
                label: "全部",
                value: "",
              },
              {
                label: "在线咨询",
                value: "在线咨询",
              },
              {
                label: "图文咨询",
                value: "图文咨询",
              },
              {
                label: "图文咨询-合同代拟",
                value: "图文咨询-合同代拟",
              },
              {
                label: "图文咨询-合同审核",
                value: "图文咨询-合同审核",
              },
              {
                label: "解答文档",
                value: "解答文档",
              },
              {
                label: "电话咨询",
                value: "电话咨询",
              },
            ],
          },
          {
            placeholder: "选择日期",
            formType: "datePicker",
            label: "日期",
            pickerType: "date",
            mode: "createTime",
            value: "",
          },
        ],
      },
      //------- Table -------//
      comTableMode: [
        {
          type: "selection", //多选列
        },
        {
          label: "日期",
          mode: "createTime",
          align: "center",
          width: "153px",
        },
        {
          label: "订单号",
          mode: "orderNo",
          align: "center",
        },
        {
          label: "摘要",
          mode: "info",
        },
        {
          label: "职等",
          mode: "level",
          align: "center",
        },
        {
          label: "订单金额（元）",
          mode: "amount",
          align: "center",
        },
        {
          label: "服务时常（min）",
          mode: "time",
          align: "center",
        },
        {
          label: "拨比",
          mode: "ratio",
        },
        {
          label: "收入（元）",
          mode: "income",
          align: "center",
        },
      ],
      comTableList: [],
      comTablePagination: {
        pageNum: 1, //第几页
        total: 0, // 总数
        pageSize: 10, //每页显示数
      },
      comTableConfig: {
        loading: false,
      },
      //------- Button -------//
      //按钮配置
      comMb8ButtonConfig: [
        {
          label: "确认无误",
          type: "primary",
          icon: "el-icon-check",
          clickBtn: "",
          vHasPermi: "",
          btnId: "confirm",
          disabled: false,
        },
        {
          label: "报错",
          type: "danger",
          icon: "el-icon-close",
          clickBtn: "",
          vHasPermi: "",
          btnId: "error",
          disabled: false,
        },
      ],
    };
  },
  beforeRouteEnter(to, from, next) {
    /* must call `next` */
    next((vm) => {
      vm.eInfo = JSON.parse(to.query.data);
      vm.comTablePagination["employeeId"] = vm.eInfo.employeeId;
      //初始化列表
      vm.getWageDetails_ByEmployeeIdStr(vm.comTablePagination);
      // vm.getWageDetails_ByEmployeeIdStr(
      //   Object.assign({ id: vm.eInfo.employeeIdStr }, vm.comTablePagination)
      // );
      let title = "【" + vm.eInfo.eName + "】" + "的工资明细";
      vm.$route.meta.title = title;
      let path = vm.$route.path;
      vm.$store.commit("tagsView/UPDATE_TITLE", path);
    });
  },
  mounted() {
    /* this.getWageDetails_ByEmployeeIdStr(
      Object.assign({ id: this.eInfo.employeeIdStr }, this.comTablePagination)
    ); */
  },

  methods: {
    //------- Table-分页 -------//
    // pageSize 改变时会触发	每页条数
    handleSizeChange(val) {
      this.comTablePagination.pageSize = val;
      this.getWageDetails_ByEmployeeIdStr(
        Object.assign(this.comTablePagination)
      );
    },
    // currentPage 改变时会触发	当前页
    handleCurrentChange(val) {
      this.comTablePagination.pageNum = val;
      this.getWageDetails_ByEmployeeIdStr(
        Object.assign(this.comTablePagination)
      );
    },

    //------- form -------//
    onSubmit(arr) {
      arr.forEach((item) => {
        for (const key in item) {
          this.comTablePagination[key] = item[key];
        }
      });
      if (this.comTablePagination.createTime != "") {
        let date = this.comTablePagination.createTime;
        this.comTablePagination["createTime"] = date.split(" ")[0];
      } else {
        this.comTablePagination["createTime"] = null;
      }
      console.log("onSubmit: ", this.comTablePagination);
      this.comTablePagination["pageNum"] = 1;
      this.getWageDetails_ByEmployeeIdStr(this.comTablePagination);
    },

    //------- mb8Button -------//
    //顶部按钮组
    clickBtnGroup_btnBox(btnType, btnId) {
      if (btnId == "confirm") {
        /* 确认 */
        this.$confirm("是否确认?", "提示", {
          confirmButtonText: "确认",
          cancelButtonText: "取消",
          type: "warning",
        })
          .then(() => {
            let updataData = [{ id: this.eInfo.id, status: "0" }];
            this.updateWageInfoStatus_ById(updataData);
          })
          .catch(() => {
            this.$message({
              type: "info",
              message: "操作取消",
            });
          });
      }
    },

    //------- 获取 工资明细 列表 -------//
    async getWageDetails_ByEmployeeIdStr(data) {
      this.comTableConfig.loading = true;
      let result = await getWageDetails_ByEmployeeIdStr(data).then(
        (res) => res
      );
      console.log(data, result);
      if (result.code == "200") {
        //console.log(result.data);
        this.comTableList = result.rows;
        this.comTablePagination.total = result.total;
        this.comTableConfig.loading = false;
        if (this.eInfo.status == "已完成") {
          this.comMb8ButtonConfig[0].disabled = true;
          this.comMb8ButtonConfig[0].label = "已确认";
        }
      }
    },
    //------- 修改状态--确认无误 -------//
    async updateWageInfoStatus_ById(data) {
      this.comTableConfig.loading = true;
      console.log(data);
      let result = await updateWageInfoStatus_ById(data).then((res) => res);
      console.log(result);
      if (result.code == "200") {
        this.getWageDetails_ByEmployeeIdStr(this.comTablePagination);
        this.$message({
          type: "success",
          message: "操作成功",
        });
      } else {
        this.$message({
          type: "info",
          message: result,
        });
        this.comTableConfig.loading = false;
      }
      this.comTableConfig.loading = false;
    },
  },
};
</script>

<style lang="scss" scoped>
.SalaryDetails {
  .btn-box {
    display: inline-block;
  }
}
</style>